<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <ul>
        <li>asd</li>
        <li>add</li>
        <li>asd</li>
    </ul>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com"></form>
        <input type="summit" value="提交" name="sub">
    <script>
        /*事件对象的常见属性和方法
        e.target  返回触发事件的对象   标准
        e.srcElement  返回触发事件的对象  非标准 IE678使用
        e.type 返回事件类型  比如click\mouseover 不带on
        e.cancelBubble 阻止冒泡   非标准
        e.returnValue  阻止默认事件  非标准 比如不让链接转跳
        e.perventDafault() 阻止默认事件（默认行为） 标准 比如不让链接转跳
        e.stopPropagation()阻止毛泡，标准*/
        var div=document.querySelector('div');
        div.addEventListener('click',function(e){
            //区别 e.target 点击了哪个元素，就返回哪个元素
            //this 哪个元素绑定了就返回哪个元素
            console.log(e.target);
            console.log(e.type);
        })
        var ul  =document.querySelector('ul');
        ul.addEventListener('click',function(e){
            console.log(this);
            console.log(e.target);//这里返回的是li  因为我们点击的是li
        })
        //解决兼容性问题
        div.onclick = function(e){
            e = e ||window.event;
            var target =target||e.srcElement;
            console.log(target);
        }

        //阻止默认行为（事件） 让链接不跳转
        var a =document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();
        })

        //传统注册方式
        a.onclick =function(e){
            //普通浏览器 e.preventDefault()方法
            e.preventDefault();
            //低版本浏览器 ie678  returnValue属性
            e.returnValue;
            //利用 return false 也能阻止默认行为  没有兼容性问题
            return false; //特点就是return后面的代码不执行而且只限于传统注册方式使用
        }
    </script>
</body>
</html>